<!DOCTYPE html>
<html>
<head>
	<title>Simple Charts</title>
</head>
<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
	<script type="text/javascript">
		var width=300;//画布的宽度
		var height=300;//画布的高度

		//init svg
		var svg=d3.select('body').append('svg');//Create  a SVG Element
		svg.attr('width',width);
		svg.attr('height',height);	

		//rect
		var dataset=[250,210,179,130,90];	//datasource
		var colorset=['red','blue','green','yellow','orange'];//colors
		var rectHeight=25;//每个矩形所占的像素高度(包括空白)
		var rect=svg.selectAll('rect').//选择svg内所有的矩形
		             data(dataset).//绑定数组
		             enter().//指定选择集的enter部分
		             append('rect');//当有数据而没有足够图形元素的时候,使用此方法可以添加足够的元素。
		rect.attr('x',20).
		     attr('y',function(value,index){
					return index*rectHeight;
				}).
		     attr('width',value=>value).
		     attr('height',rectHeight-2).//让每个rect实际高度小于rectHeight 2px,作为空隙
		     attr('fill',function(value,index){
		     	return colorset[index];
		     });

	</script>
</body>
</html>